<template>
    <div class="main">
        <div class="container-content" v-for="(o, index) in 9" :key="o" :offset="index > 0 ? 9 : 0">
            <!--            调用组件-->
            <card-item :width="width">
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                <div>
                    <span class="time"> 嵩县第二实验小学的洛阳文化之旅 </span>
                    <span class="content">2019.05.23    郑州    开元路小学
                        <i class="el-icon-star-on collect"></i>
                        <i class="el-icon-share Forward"></i>
                    </span>

                </div>
            </card-item>
        </div>
    </div>
</template>

<script>
   import CardItem from "@/component/cardItem/CardItem";

    export default {
        name: "OutcomeItem",
        components: {CardItem},
        data(){
            return {
                width:{width: '325px'}
            }
        }
    }
</script>

<style scoped>

    .main:after{
        content:" ";
        display:block;
        clear:both;
    }
    .container-content {
        float: left;
        margin-left: 130px;
        margin-top: 30px;
    }
    .time {
        font-size: 18px;
        font-weight: 600;
        color: rgba(80, 80, 80, 1);
        padding-top:20px;
        padding-bottom: 10px;
        text-align: center;
    }
    .content{
        margin-left: 20px;
        font-size: 13px;
        font-weight: 500;
        color: rgba(80, 80, 80, 1);
        margin-bottom: 10px;
    }
    .image {
        width: 100%;
        height: 160px;
        display: block;
    }
    span{
        display: block;
    }
    .collect{
        margin-left: 50px;
        font-size: 25px;
    }
    .Forward{
        margin-left: 20px;
        font-size: 25px;
    }
</style>